<template>
  <view class="yg">

    <!-- 搜索 -->
    <Search></Search>

    <!-- 轮播图 -->
    <view class="yg-swiper">
      <u-swiper :list="swiper"
                name="image_src"
                height="340"
                border-radius="0">
      </u-swiper>
    </view>

    <!-- 导航宫格 -->
    <u-grid :col="4">
      <u-grid-item v-for="item in catItems"
                   :key="item.name"
                   class="yg-navs-item">
        <navigator url="/pages/category/category"
                   open-type="switchTab">
          <image :src="item.image_src"></image>
        </navigator>
      </u-grid-item>
    </u-grid>

    <!-- 商品区域 -->
    <view class="yg-pics">
      <view class="yg-pics-item"
            v-for="(item,index) in floorData"
            :key="index">
        <!-- 标题 -->
        <view class="pics-item-title">
          <image :src="item.floor_title.image_src"></image>
        </view>
        <!-- 内容 -->
        <view class="pics-item-list">
          <navigator :url="v.navigator_url"
                     class="item-list-i"
                     v-for="v in item.product_list"
                     :key="v.image_src">
            <image :src="v.image_src"></image>
          </navigator>
        </view>
      </view>

      <!-- 滚到顶部 -->
      <ScrollTop ref="top"></ScrollTop>
    </view>

  </view>
</template>

<script>
import Search from '@/components/Search.vue'
import ScrollTop from '@/components/ScrollTop.vue'

export default {
  components: { Search, ScrollTop },
  data() {
    return {
      swiper: [], // 轮播图
      catItems: [], //导航
      floorData: [], //商品区
    }
  },
  created() {
    this.getSwiperFn()
    this.getCatitemsFn()
    this.getFloorDataFn()
  },
  onPageScroll(page) {
    const { windowHeight } = uni.getSystemInfoSync() // 页面高度
    this.$refs.top.showBackToTop = windowHeight / 2 < page.scrollTop
  },
  methods: {
    async getSwiperFn() {
      const res = await this.$u.api.getSwiperAPI()
      this.swiper = res
    },
    async getCatitemsFn() {
      const res = await this.$u.api.getCatItemsAPI()
      this.catItems = res
    },
    async getFloorDataFn() {
      const res = await this.$u.api.getFloorDataAPI()
      this.floorData = res.map((v) => ({
        ...v,
        product_list: v.product_list.map((i) => ({
          ...i,
          navigator_url: i.navigator_url.replace('/pages', '/pages/goods_list'),
        })),
      }))
    },
  },
}
</script>

<style lang='scss' scoped>
.yg {
  .yg-swiper {
    height: 340rpx;
    swiper {
      height: 340rpx;
    }
    swiper-item {
      height: 340rpx;
      navigator {
        height: 340rpx;
      }
    }
  }
  .yg-navs-item {
    image {
      width: 128rpx;
      height: 140rpx;
    }
  }
  .yg-pics {
    .yg-pics-item {
      .pics-item-title {
        image {
          height: 60rpx;
        }
      }

      .pics-item-list {
        overflow: hidden;
        margin-bottom: 20rpx;

        navigator {
          float: left;

          image {
            width: 100%;
            height: 100%;
          }

          &:nth-child(1) {
            margin-left: 16rpx;
            height: 386rpx;
            width: 232rpx;
          }

          &:nth-child(3),
          &:nth-child(2) {
            margin-bottom: 10rpx;
          }

          &:nth-child(2),
          &:nth-child(4) {
            margin-left: 15rpx;
            height: 188rpx;
            width: 233rpx;
          }

          &:nth-child(3),
          &:nth-child(5) {
            margin-left: 15rpx;
            height: 188rpx;
            width: 223rpx;
          }
        }
      }
    }
  }
}
</style>
